<template>
  <div :id="id"
    class="divlabel-container">
    <div class="animate-maker-border"
      @click="closeClick">
      <span class="animate-marker__text">{{ title }}</span>
    </div>

  </div>
</template>
 
<script>
  export default {
    name: 'DynamicLabel',
    data() {
      return {};
    },
    props: {
      title: {
        type: String,
        default: '标题'
      },
      id: {
        type: String,
        default: '001'
      }
    },
    methods: {
      closeClick() {
        if (this.closeEvent) {
          this.closeEvent();
        }
      }
      // closeClick() {
      //   this.$emit('closeEvent');
      // }
    }
  };
</script>
 
 
<style lang="scss" scoped>
  .divlabel-container {
    width: 200px;
    position: relative;
    bottom: 0;
    left: 0;
    .animate-maker-border {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 15;
    }

    .animate-maker-border::before,
    .animate-maker-border::after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .animate-maker-border {
      width: 150px;
      height: 30px;
      margin: 0;
      color: #69ca62;
      box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
    }
    .animate-maker-border::before,
    .animate-maker-border::after {
      content: '';
      z-index: 10;
      margin: -5%;
      box-shadow: inset 0 0 0 2px;
      animation: clipMe 8s linear infinite;
    }

    @keyframes clipMe {
      0%,
      100% {
        clip: rect(0px, 170px, 2px, 0px);
      }
      25% {
        clip: rect(0px, 2px, 47px, 0px);
      }
      50% {
        clip: rect(45px, 170px, 47px, 0px);
      }
      75% {
        clip: rect(0px, 170px, 47px, 45px);
      }
    }
    .animate-marker__text {
      color: #fff;
      font-size: 14px;
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      font-weight: bolder;
      user-select: none;
      cursor: pointer;
      background: rgba(0, 173, 181, 0.32);
    }
  }
  .divlabel-container::before,
  .divlabel-container::after {
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
    cursor: pointer;
  }
</style>